<!DOCTYPE html>
<html>
<head>
	<title>Defuddle Playground</title>
	<meta charset="UTF-8">
	<style>
		:root {
			--ax: rgb(16, 15, 15);
			--re: rgb(175, 48, 41);
			--gr: rgb(102, 128, 11);
			--bg: rgb(255, 252, 240);
			--bg-2: rgb(255, 252, 240);
			--ui: rgb(230, 228, 217);
			--tx: rgb(16, 15, 15);
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html, body {
			height: 100%;
			overflow: hidden;
		}

		body {
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
			line-height: 1.5;
			color: var(--tx);
			background: var(--bg-2);
		}

		.container {
			max-width: 1400px;
			margin: 0 auto;
			padding: 2rem;
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		header {
			margin-bottom: 2rem;
			flex-shrink: 0;
		}

		header h1 {
			font-size: 2.5rem;
			margin-bottom: 0.5rem;
		}

		.playground-container {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 2rem;
			flex: 1;
			min-height: 0;
		}

		.input-section, .output-section {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			min-height: 0;
		}

		.url-input {
			display: none;
			gap: 0.5rem;
			align-items: center;
			margin-bottom: 0.5rem;
		}

		.url-input input {
			flex: 1;
			padding: 1rem;
			background: var(--bg);
			border: 1px solid var(--ui);
			border-radius: 0.375rem;
			font-size: 0.875rem;
		}

		.controls {
			display: flex;
			gap: 0.5rem;
			flex-shrink: 0;
		}

		.btn {
			padding: 0.5rem 1rem;
			border: 1px solid var(--ui);
			border-radius: 0.375rem;
			background: var(--bg);
			cursor: pointer;
			font-size: 0.875rem;
			transition: all 0.2s;
		}

		.btn:hover {
			background: var(--bg-2);
		}

		.btn.primary {
			background: var(--ax);
			color: var(--bg);
			border-color: var(--ax);
		}

		.btn.primary:hover {
			opacity: 0.9;
		}

		textarea {
			flex: 1;
			padding: 1rem;
			background: var(--bg);
			border: 1px solid var(--ui);
			border-radius: 0.375rem;
			font-family: monospace;
			font-size: 0.875rem;
			resize: none;
			min-height: 0;
		}

		.output-container {
			flex: 1;
			display: flex;
			flex-direction: column;
			border: 1px solid var(--ui);
			border-radius: 0.375rem;
			overflow: hidden;
			min-height: 0;
		}

		.output-tabs {
			display: flex;
			border-bottom: 1px solid var(--ui);
			background: var(--bg);
			flex-shrink: 0;
		}

		.tab {
			padding: 0.75rem 1.5rem;
			border: none;
			background: none;
			cursor: pointer;
			font-size: 0.875rem;
			color: var(--tx);
			border-bottom: 2px solid transparent;
		}

		.tab.active {
			color: var(--ax);
			border-bottom-color: var(--ax);
		}

		.tab-content {
			display: none;
			flex: 1;
			overflow: auto;
			background: var(--bg);
			min-height: 0;
		}

		.tab-content.active {
			display: block;
		}

		.output-content {
			font-family: monospace;
			font-size: 0.875rem;
			white-space: pre-wrap;
			word-break: break-word;
			padding: 1rem;
			height: 100%;
			overflow: auto;
		}

		.error-container {
			position: fixed;
			bottom: 1rem;
			right: 1rem;
			max-width: 400px;
			padding: 1rem;
			background: var(--re);
			color: var(--bg);
			border-radius: 0.375rem;
			display: none;
			z-index: 1000;
		}

		.error-container.show {
			display: block;
		}
	</style>
</head>
<body>
	<div class="container">
		<header>
			<h1>Defuddle Playground</h1>
		</header>

		<div class="playground-container">
			<div class="input-section">
				<h2>Input HTML</h2>
				<div class="controls">
					<button id="clearInput" class="btn">Clear</button>
				</div>
				<div class="url-input">
					<input type="text" id="url" class="padding-0" placeholder="URL...">
				</div>
				<textarea id="input" placeholder="Paste your HTML here..."></textarea>
			</div>

			<div class="output-section">
				<h2>Output</h2>
				<div class="controls">
					<button id="parse" class="btn primary">Parse HTML</button>
					<button id="clearOutput" class="btn">Clear</button>
				</div>
				<div class="output-container">
					<div class="output-tabs">
						<button class="tab active" data-tab="content">Content</button>
						<button class="tab" data-tab="metadata">Metadata</button>
						<button class="tab" data-tab="debug">Debug</button>
					</div>
					<div class="tab-content active" id="content">
						<div id="output" class="output-content"></div>
					</div>
					<div class="tab-content" id="metadata">
						<pre id="metadataOutput" class="output-content"></pre>
					</div>
					<div class="tab-content" id="debug">
						<pre id="debugOutput" class="output-content"></pre>
					</div>
				</div>
			</div>
		</div>

		<div class="error-container" id="errorContainer"></div>
	</div>

	<script src="../dist/index.js"></script>
	<script>
		// DOM Elements
		const input = document.getElementById('input');
		const urlInput = document.getElementById('url');
		const output = document.getElementById('output');
		const metadataOutput = document.getElementById('metadataOutput');
		const debugOutput = document.getElementById('debugOutput');
		const clearInputBtn = document.getElementById('clearInput');
		const parseBtn = document.getElementById('parse');
		const clearOutputBtn = document.getElementById('clearOutput');
		const errorContainer = document.getElementById('errorContainer');
		const tabs = document.querySelectorAll('.tab');
		const tabContents = document.querySelectorAll('.tab-content');

		// Event Listeners
		clearInputBtn.addEventListener('click', () => {
			input.value = '';
		});

		clearOutputBtn.addEventListener('click', () => {
			output.innerHTML = '';
			metadataOutput.textContent = '';
			debugOutput.textContent = '';
			hideError();
		});

		parseBtn.addEventListener('click', () => {
			try {
				const parser = new DOMParser();
				const doc = parser.parseFromString(input.value, 'text/html');
				
				const defuddle = new Defuddle(doc, {
					url: urlInput.value
				});
				const result = defuddle.parse();
				
				// Log the full result for debugging
				console.log('Defuddle Result:', result);
				
				// Display content
				output.innerHTML = result.content;
				
				// Display metadata - show all fields except content
				const { content, ...metadata } = result;
				metadataOutput.textContent = JSON.stringify(metadata, null, 2);
				
				// Display debug info with actual properties
				debugOutput.textContent = JSON.stringify({
					title: result.title || null,
					description: result.description || null,
					domain: result.domain || null,
					favicon: result.favicon || null,
					image: result.image || null,
					parseTime: result.parseTime || null,
					published: result.published || null,
					schemaOrgData: result.schemaOrgData || null,
					site: result.site || null,
					wordCount: result.wordCount || null,
					content: result.content ? 'Content present' : 'No content'
				}, null, 2);
				
				hideError();
			} catch (error) {
				console.error('Defuddle Error:', error);
				console.error('Error Stack:', error.stack);
				showError(error.message);
			}
		});

		// Tab switching
		tabs.forEach(tab => {
			tab.addEventListener('click', () => {
				const targetTab = tab.dataset.tab;
				
				// Update active tab
				tabs.forEach(t => t.classList.remove('active'));
				tab.classList.add('active');
				
				// Update active content
				tabContents.forEach(content => {
					content.classList.remove('active');
					if (content.id === targetTab) {
						content.classList.add('active');
					}
				});
			});
		});

		// Error handling
		function showError(message) {
			errorContainer.textContent = message;
			errorContainer.classList.add('show');
		}

		function hideError() {
			errorContainer.classList.remove('show');
		}
	</script>
</body>
</html>